#{extends 'main.html' /} 
#{set title:'Suas consultas' /}


<div class="span4">
	<h6>Filtrar por data</h6>
	#{form @showConsultasByDate(), class:'form-inline well'}
	
	<strong>De</strong>
	<input id="dp1" data-date="12/02/2012" class="input-small" size="16" type="text" value="12/02/2012">
    <strong>a</strong>
	<input id="dp2" data-date="12/02/2012" class="input-small" size="16" type="text" value="12/02/2012">   
	
	
	<button id="btnBuscaEntreDatas" type="submit" class="btn btn-success pull-right"><i class="icon-white icon-search"></i></button>
   

	#{/form}

</div>

<div class="span4">

	<h6>Filtrar por Cliente</h6>

	#{form @showConsultasByPaciente(), class:'form-inline well'}

	#{select 'consulta.paciente.id', items:pacientes, valueProperty:'id', labelProperty:'nome'/}
	
	<button type="submit" class="btn btn-success pull-right"><i class="icon-white icon-search"></i></button>

	#{/form}

</div>

<div class="span4">

	<h6>Filtrar por Procedimento</h6>

	#{form @showConsultasByPaciente(), class:'form-inline well'}

	#{select 'consulta.procedimento.id', items:procedimentos, valueProperty:'id', labelProperty:'nome'/}
	
	<button type="submit" class="btn btn-success pull-right"><i class="icon-white icon-search"></i></button>

	#{/form}

</div>



<div id="resultDiv" class="span12">

	#{if !consultas.empty}

	<table id="resultTable"  class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>Data</th>
				<th>Paciente</th>
				<th>Procedimento</th>
				<th>Valor</th>
			</tr>
		</thead>
		<tbody>
			#{list items:consultas, as: 'consulta'}
			<tr>
				<td>${consulta.dataHora.format('dd/MM/yyyy HH:mm')}</td>
				<td>${consulta.paciente.nome}</td>
				<td>${consulta.procedimento.nome}</td>
				<td>${consulta.procedimento.valor},00</td>
			</tr>

			%{
			soma+=consulta.procedimento.valor;
		}%
		#{/list}
	</tbody>
</table>

<div class="span12">
<a href="#" class="btn btn-danger pull-right disabled">Valor Total: R$ ${soma},00</a>			
</div>

</div>




#{/if}
#{else}
Não existem consultas
#{/else}



<script>
		$(function(){
			
			$('#dp1').datepicker();
			$('#dp2').datepicker();
			
			
			$('#btnBuscaEntreDatas').click(function(){
				
				$('#resultDiv').addClass("hidden");
				$('#ajaxLoader').removeClass("hidden");
				
				$.getJSON("@{Dentistas.listByDate}",function(data){
					
					
					$('#resultTable tbody tr').remove();
					trTable = "";
					for (item in data)
						{
							item = data[item]; // js sucks
							trTable += '<tr><td>'+item.dataHora+'</td><td>'+item.paciente.nome+'</td><td>'+item.procedimento.nome+'</td><td>'+item.procedimento.valor+'</td></tr>';
						}
					$('#resultTable tbody').html(trTable);
					
					$('#resultDiv').removeClass("hidden");
					$('#ajaxLoader').addClass("hidden");
					
				});
				
				return false;
				
			});
			
			
		
		})
</script>

